<template>
  <div class="category">
    <template v-for="item in categories" :key="item.id">
      <div class="item">
        <img :src="item.pictureUrl" alt="">
        <div class="text">{{ item.title }}</div>
      </div>
    </template>
  </div>
</template>
<script setup>
import useHomeStore from '@/stores/modules/home';
import { storeToRefs } from 'pinia';

  const homeStore = useHomeStore();
  const { categories } = storeToRefs(homeStore);
</script>
<style lang="less" scoped>
.category {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 20px 10px;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: hidden;
  }
  .item {
    flex-shrink: 0;
    width: 70px;
    font-size: 12px;
    text-align: center;
    img {
      width: 30px;
      margin-bottom: 10px;
    }
  }
}
</style>
